<!DOCTYPE html>
<html lang="zh_cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/third/layui/css/layui.css" th:href="@{/third/layui/css/layui.css}">
    <!--<link rel="stylesheet" href="../../../static/css/app.css" th:href="@{/css/app.css}">-->
    <!--自定义通用css-->

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div th:replace="/admin/common/header::header"></div>
    <div th:replace="/admin/common/side::side"></div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-inline">
                <input class="layui-input"  id="searchContent" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload" id="queryBtn">搜索</button>
            <button class="layui-btn"  id="addBtn">新增标签</button>

            <table class="layui-hide" lay-filter="test" id="test" ></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>


</div>
<script src="../../static/third/layui/layui.js" th:src="@{/third/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','table','jquery'], function(){
        var element = layui.element;
        var table = layui.table;
        var jquery = layui.jquery;
        var $ = jquery;

        // 表格渲染 》》》》》》》》》》》》》》》》》》》》
        table.render({
            elem: '#test'
            ,url:'/admin/tag/list'
            ,cols: [
                [
                    {field:'tagId', width:80, title: 'ID', sort: true}
                    ,{field:'name', width:80, title: '名称',minWith:150, width: '10%'}
                    ,{field:'description', width:80, title: '简介',width:'18%'}
                    ,{field:'createTime', width:80, title: '创建时间', sort: true,width:'18%',templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"}
                    ,{field:'updateTime', width:80, title: '更新时间', sort: true,width:'18%',templet: '<div>{{layui.util.toDateString(d.updateTime,"yyyy年MM月dd日 HH:mm:ss")}}</div>'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]
            ]
            ,page: true
        });
        // 表格渲染《《《《《《《《《《《《《《《《《《《《《
        // 定义弹出层对象，方便后面关闭使用。
        let editLayer;
        //监听工具条》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
        table.on('tool(test)', function(obj){
            let data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除该标签吗？',
                    {
                        title:'删除标签'
                    }, function(index){
                    // 删除数据
                    // 发起ajax请求
                    // 获取删除对象的id
                    let tagId = obj.data.tagId;
                    $.ajax({
                        url:'/admin/tag/delete/'+tagId,
                        type:'get',
                        success:function (data) {
                            if(data == 'success'){
                                layer.msg('删除成功',{
                                    icon:5,
                                    timeout:1200
                                })
                            }
                            obj.del();
                            layer.close(index);
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                $('#editForm input[name=tagId]').val(data.tagId);
                $('#editForm input[name=name]').val(data.name);
                $('#editForm input[name=description]').val(data.description);
                editLayer =  layer.open({
                    title:'编辑标签',
                    type: 1,
                    content: $('#editForm'),
                    area:['500px', '300px']
                })


                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
        //监听工具条《《《《《《《《《《《《《《《《《《《《《《《《《《《《《
        // 监听提交按钮点击事件》》》》》》》》》》》》》》
        $('#submitBtn').click(function () {
            // alert(12312);
            // 获取值
            let tagId = $('#editForm input[name=tagId]').val();
            let name =  $('#editForm input[name=name]').val();
            let description =  $('#editForm input[name=description]').val();
            // 发送Ajax请求
            let obj = {
                'tagId':tagId,
                'name':name,
                'description':description
            }
            $.ajax({
                url:'/admin/tag/update',
                type:'post',
                data:JSON.stringify(obj),
                contentType:'application/json;charset=UTF-8',
                success:function (data) {
                    if(data == 'success'){
                        layer.msg('修改成功！',{
                            timeout:1200,
                            icon:6
                        });
                        // 关闭弹出层
                        layer.close(editLayer);
                        // table数据重载
                        table.reload('test', {
                            url: '/admin/tag/list'
                            ,where: {} //设定异步数据接口的额外参数
                            //,height: 300
                        });
                    }

                }
            })
        })
        // 监听提交按钮点击事件《《《《《《《《《《《《《

        // 搜索点击事件 》》》》》》》》》》》》》》》》》》
        $('#queryBtn').click(function () {
            // 1 获取搜索内容，按照标签名称搜索
            let name = $('#searchContent').val();
            // alert(name);
            name = name.trim();
            if(name === ''){
                return;
            }

            // 发送Ajax请求到后台
            table.render({
                elem: '#test'
                ,url:'/admin/tag/list?name='+name
                ,cols: [
                    [
                        {field:'tagId', width:80, title: 'ID', sort: true}
                        ,{field:'name', width:80, title: '名称',minWith:150, width: '10%'}
                        ,{field:'description', width:80, title: '简介',width:'18%'}
                        ,{field:'createTime', width:80, title: '创建时间', sort: true,width:'18%',templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"}
                        ,{field:'updateTime', width:80, title: '更新时间', sort: true,width:'18%',templet: '<div>{{layui.util.toDateString(d.updateTime,"yyyy年MM月dd日 HH:mm:ss")}}</div>'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                    ]
                ]
                ,page: true
            });
        })
        // 搜索点击事件《《《《《《《《《《《《《《《《《《

        // 新增标签点击事件》》》》》》》》》》》》》》
        $('#addBtn').click(function () {
            $('#postForm input[name=name]').val('')
            $('#postForm input[name=description]').val('');

            editLayer =  layer.open({
                title:'编辑标签',
                type: 1,
                content: $('#postForm'),
                area:['500px', '300px']
            })
        })
        // 新增标签点击事件《《《《《《《《《《《《《
        
        $('#postBtn').click(function () {
            //
           let name = $('#postForm input[name=name]').val();
           let description = $('#postForm input[name=description]').val();
           // 发起Ajax保存数据
            var obj = {
                'name':name,
                'description':description
            }
            $.ajax({
                url:'/admin/tag/post',
                type:'post',
                contentType:'application/json;charset=utf-8',
                data:JSON.stringify(obj),
                success:function (data) {
                    layer.msg('添加成功');
                    // 清空表单

                    layer.close(editLayer);
                    // reload
                    table.reload('test', {
                        url: '/admin/tag/list'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                }
            })
        })
    });
</script>

<!--隐藏表单用于修改数据》》》》》》》》》》》》-->
<form class="layui-form"  style="display: none" id="editForm" >

    <div class="layui-form-item layui-hide">
        <!--<label class="layui-form-label">标签名</label>-->
        <div class="layui-input-block">
            <input type="text" name="tagId"      autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标签名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input class="layui-btn"  lay-filter="formDemo" id="submitBtn" th:value="提交"/>
            <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
    </div>
</form>
<!--隐藏表单用于修改数据 《《《《《《《================-->
<!--隐藏表单用于添加数据》》》》》》》》》》》》-->
<form class="layui-form"  style="display: none" id="postForm" >

    <div class="layui-form-item layui-hide">
        <!--<label class="layui-form-label">标签名</label>-->
        <div class="layui-input-block">
            <input type="text" name="tagId"      autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标签名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input class="layui-btn"  lay-filter="formDemo" id="postBtn" th:value="提交"/>
            <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
    </div>
</form>
<!--隐藏表单用于添加数据 《《《《《《《================-->
</body>
</html>